<template>
    <popup-dialog
        ref="popup"
        :isShow="showMenuPop"
        :list="popList"
        @onClick="onClickPopMenu">
    </popup-dialog>

    <view @click="handleGlobalClick" class="page">
        <uni-card class="uni_card"
                  :title="this.user.userNickName"
                  :sub-title="this.user.email"
                  :extra="`消费总额:${this.totalConsumption}`"
                  :thumbnail="this.user.userHeadImg">
            <text class="text-slogan">{{ this.user.userSlogan }}</text>
        </uni-card>
        <uni-grid class="grid-body" :column="5" :showBorder="false" @change="handleClickGrid">
            <uni-grid-item v-for="(item, index) in this.gridItemList" :index="index" :key="index">
                <view class="grid-item-box">
                    <image class="icon" :src="item.icon" mode="aspectFit"/>
                    <text class="text">{{item.text}}</text>
                </view>
            </uni-grid-item>
        </uni-grid>

        <view class="date-range-body">
            <uni-section title="自选时间段" type="line"></uni-section>
            <uni-datetime-picker ref="datetime" :end="Date.now()" type="daterange" @change="getBill" />
        </view>

        <scroll-view :scroll-y="true" class="scroll-Y" @scrolltolower="lower">
            <view v-if="this.consumptionRecordsList.length > 0">
                <uni-card v-for="item in consumptionRecordsList" @click="queryConsumptionRecordsDetailed(item.id)" :title="item.conLocation" :isFull="false" :sub-title="`${item.conAmount}元`" :extra="item.conTime">
                    <text class="uni-body">{{item.conProduct}}</text>
                </uni-card>
                <uni-load-more :status="loadMoreStatus" />
            </view>
        </scroll-view>
    </view>
</template>

<script>
import {
    getTodayIcon,
    getThisWeekIcon,
    getMonthIcon,
    getSeasonsIcon,
    getTwelveAnimalsIcon
} from "../../js/utils/staticUtil"
import {
    getTodayDate,
    getWeekStartAndEnd,
    getMonthStartAndEnd,
    getSeasonsStartAndEnd,
    getYearStartAndEnd
} from "../../js/utils/dateUtil";
import {getTotalConsumption} from "../../js/api/user";
import {hide, loading, toast} from "../../js/utils/showTip";
import {dateQueryConsumptionRecords} from "../../js/api/consumptionRecords";

import PopupDialog from "../../components/popup-dialog.vue";
import UniCard from "../../uni_modules/uni-card/components/uni-card/uni-card.vue";
import UniGrid from "../../uni_modules/uni-grid/components/uni-grid/uni-grid.vue";
import UniGridItem from "../../uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import UniDatetimePicker
    from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import UniLoadMore from "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";

export default {
    components: {
        PopupDialog,
        UniLoadMore, UniDatetimePicker, UniSection, UniIcons, UniGridItem, UniGrid, UniCard},
    data() {
        return {
            user: {
                username: '',
                userPhone: '',
                email: '',
                userNickName: '',
                userHeadImg: '',
                userSlogan: '',
                userRegistrationTime: ''
            },
            gridItemList: [],
            totalConsumption: '',
            consumptionRecordsList: [],
            pageIndex: 1,
            pageSize: 6,
            loadMoreStatus: 'more',
            queryDate: [],
            showMenuPop: false,
            popList: [
                {
                    name: '个人信息',
                    toPage: ''
                },
                {
                    name: '录入消费',
                    toPage: ''
                }
            ]
        }
    },
    onLoad() {
        this.user = uni.getStorageSync("user");
        console.log(this.user)
        this.getTotalConsumption();
        this.gridItemList.push(
            {
                icon: getTodayIcon(),
                text: '今日账单'
            },
            {
                icon: getThisWeekIcon(),
                text: '本周账单'
            },
            {
                icon: getMonthIcon(),
                text: '本月账单'
            },
            {
                icon: getSeasonsIcon(),
                text: '季度账单'
            },
            {
                icon: getTwelveAnimalsIcon(),
                text: '年度账单'
            },
        )
        let todayDate = getTodayDate()
        this.queryDate = [todayDate, todayDate]
        this.dateQueryConsumptionRecords()
    },
    onNavigationBarButtonTap(e) {
        if (e.index === 0) {
            this.$refs.datetime.close()
            this.showMenuPop = !this.showMenuPop
        }
    },
    methods: {
        getTotalConsumption() {
            getTotalConsumption().then(response => {
                this.totalConsumption = response.data
            }).catch(response => {
                toast(`服务出现错误：${response.message}`, 'error')
            })
        },
        getBill(e) {
            console.log(e)
        },
        handleClickGrid(e) {
            let {
                index
            } = e.detail
            let dateRange = '';
            // 根据点击的选项获取周、月、季度、年的第一天和最后一天
            switch (index) {
                case 0:
                    let todayDate = getTodayDate()
                    this.queryDate = [todayDate, todayDate]
                    this.dateQueryConsumptionRecords()
                    break;
                case 1:
                    this.queryDate = getWeekStartAndEnd()
                    this.dateQueryConsumptionRecords()
                    break;
                case 2:
                    this.queryDate = getMonthStartAndEnd()
                    this.dateQueryConsumptionRecords()
                    break;
                case 3:
                    this.queryDate = getSeasonsStartAndEnd()
                    this.dateQueryConsumptionRecords()
                    break;
                case 4:
                    this.queryDate = getYearStartAndEnd()
                    this.dateQueryConsumptionRecords()
                    break;
                default:
                    break;
            }
        },
        dateQueryConsumptionRecords() {
            let requestData = {
                dates: this.queryDate,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }
            loading('正在查询', true)
            dateQueryConsumptionRecords(requestData).then(response => {
                if (response.code === 200) {
                    let crList = Array.from(response.data)
                    if (crList.length > 0) {
                        this.loadMoreStatus = 'more'
                        this.consumptionRecordsList = this.consumptionRecordsList.concat(crList)
                    } else {
                        this.loadMoreStatus = 'noMore'
                    }
                    hide()
                } else {
                    hide()
                    toast(response.message, 'NONE', true, 1500)
                }
            }).catch(response => {
                hide()
                toast('服务已断开', 'ERROR', true, 1600)
            })
        },
        queryConsumptionRecordsDetailed(crId) {
            console.log(crId)
        },
        lower() {
            this.loadMoreStatus = 'loading'
            this.pageIndex++
            this.dateQueryConsumptionRecords()
        },
        onClickPopMenu() {

        },
        handleGlobalClick() {
            if (this.showMenuPop) {
                this.showMenuPop = !this.showMenuPop
            }
        }
    }
}
</script>

<style lang="scss">
.uni_card {
    background: linear-gradient(135deg, #00AEEF, #00CCBC);
}

.text-slogan {
    color: black;
}

.grid-body {
    padding-left: 3%;
    padding-right: 3%;

    .text {
        font-size: 14px;
        margin-top: 5px;
    }

    .grid-item-box {
        flex: 1;
        // position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 0;

        .icon {
            flex: 1;
            width: 40px;
            height: 40px;
        }
    }
}

.date-range-body {
    background-color: #fff;
    padding-top: 5%;
    padding-bottom: 10%;
}

.scroll-Y {
    height: 50%;
}
.page{
    height: 100%;
    overflow: hidden; /* 防止页面内容超出时可以滚动 */
}

.textTips{
    text-align: center;
    color: #c1c1c1;
}
</style>